<template>
  <div class="market-list" @click="onListClick(listData.order_id)">
    <img class="avatar" :src="listData.type === 2 ? listData.buyer_headimgurl : listData.seller_headimgurl"/>
    <div class="detail">
      <div class="name">{{listData.type === 2 ? listData.buyer : listData.seller}}</div>
      <div class="intro">期望{{type}}：{{listData.amount}} 金币</div>
      <div class="date">发布日期：{{createdTime}}</div>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    listData: {
      type: Object,
      default: {}
    }
  },
  computed: {
    createdTime () {
      let output
      const time = this.listData.created
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    },
    type () {
      let type = ''
      if (this.listData.type === 1) {
        type = '出售'
      } else if (this.listData.type === 2) {
        type = '购买'
      }
      return type
    }
  },
  methods: {
    onListClick (id) {
      wx.navigateTo({
        url: `/pages/coin-market-detail/main?orderId=${id}`,
      })
    }
  },
}
</script>

<style lang="less" scoped>
.market-list {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 20rpx;
  padding: 30rpx 24rpx;
  background-color: #fff;
  &:active {
    background: #d8d8d8;
  }
  .avatar {
    width: 80rpx;
    height: 80rpx;
  }
  .detail {
    flex: 1;
    padding-left: 24rpx;
    .name {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    .intro {
      font-size: 28rpx;
      color: #333;
      padding-top: 14rpx;
    }
    .date {
      font-size: 28rpx;
      color: #777;
      padding-top: 14rpx;
    }
  }
  &::after {
    content: " ";
    display: block;
    height: 12rpx;
    width: 12rpx;
    border-width: 4rpx 4rpx 0 0;
    border-color: #cacaca;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: 24rpx;
    margin-top: -6rpx;
  }
}
</style>
